<template>
  <view class="box">
    <view class="yh_select_type" @click="setShowState">
      <text v-if="required" style="color: red">*</text>
      <text>{{ typeTrunToName }}</text>
      <nut-icon
        font-class-name="iconfont"
        class-prefix="iconfont"
        name=".icon-jiantou"
        size="20"
        color="#cccccc"
        style="margin-right: -10px"
      />
    </view>
    <yh_bottom_select_cancel
      v-model="showState"
      :typeEnum="mobileType"
      :handOptionsSelected="handOptionsSelected"
    />
  </view>
</template>
<script lang='ts'>
import yh_bottom_select_cancel from "@/components/yh-bottom-select-cancel.vue";
import { ref, toRefs, reactive } from "vue";
import { mobileType } from "@/assets/common/commonTypeEnum.js";
export default {
  name: "yh_select_type",
  components: { yh_bottom_select_cancel },
  computed: {
    typeTrunToName: function (val) {
      for (let i = 0; i < mobileType.length; i++) {
        if (val.typeValue === mobileType[i].value) {
          return mobileType[i].name;
        }
      }
    },
  },
  props: {
    modelValue: {
      default: "",
    },
    required: {
      default: false,
    },
  },
  setup(props, { emit }) {
    console.log(props)
    const state = reactive({
      typeValue: props.modelValue, //号码类别
      mobileType:mobileType
    });
    const showState = ref(false);
    const setShowState = () => {
      showState.value = !showState.value;
    };
    const handOptionsSelected = (value) => {
      if (value) {
        state.typeValue = value;
        emit("update:modelValue", value);
      }
      setShowState();
      console.log(state);
    };
    return {
      showState,
      setShowState,
      handOptionsSelected,
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss">
.box {
  background: #ffffff;
  .yh_select_type {
    padding: 13px 0;
    margin-left: 16px;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 13px;
      padding: 0 2px;
    }
    .inputBox {
      flex: 1;
      padding: 0 16px 0 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      .input {
        flex: 1;
        text-align: right;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #cccccc;
      }
      .locationIcon {
        width: 16px;
        height: 16px;
        margin-left: 13px;
        border-left: 1px solid #eeeeee;
        padding-left: 6px;
        margin-right: -10px;
      }
    }
  }
}
</style>
